<template>
    <div class="home-container">
        <h1 class="page-title">学生管理系统</h1>

        <!-- 管理员功能卡片 -->
        <div v-if="isAdmin" class="card-grid">
            <el-card v-for="item in adminMenus" :key="item.path" class="menu-card" @click="$router.push(item.path)">
                <div class="card-content">
                    <el-icon :size="40" :class="item.iconColor">
                        <component :is="item.icon" />
                    </el-icon>
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.description }}</p>
                </div>
            </el-card>
        </div>

        <!-- 学生功能卡片 -->
        <div v-else-if="isStudent" class="card-grid">
            <el-card v-for="item in studentMenus" :key="item.path" class="menu-card" @click="$router.push(item.path)">
                <div class="card-content">
                    <el-icon :size="40" :class="item.iconColor">
                        <component :is="item.icon" />
                    </el-icon>
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.description }}</p>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import {
    User,
    School,
    House,
    Warning,
    Trophy,
    Document
} from '@element-plus/icons-vue'

const store = useStore()

const isAdmin = computed(() => store.getters.isAdmin)
const isStudent = computed(() => store.getters.isStudent)

// 管理员菜单项
const adminMenus = [
    {
        title: '学生管理',
        path: '/students',
        icon: 'User',
        description: '管理学生信息，包括添加、修改和删除学生记录',
        iconColor: 'text-blue'
    },
    {
        title: '班级管理',
        path: '/classes',
        icon: 'School',
        description: '管理班级信息，包括添加、修改和删除班级',
        iconColor: 'text-green'
    },
    {
        title: '学院管理',
        path: '/departments',
        icon: 'House',
        description: '学院信息，包括添加、修改和删除学院记录',
        iconColor: 'text-orange'
    },
    {
        title: '惩罚管理',
        path: '/punishments',
        icon: 'Warning',
        description: '管理学生惩罚记录',
        iconColor: 'text-red'
    },
    {
        title: '奖励管理',
        path: '/rewards',
        icon: 'Trophy',
        description: '管理学生奖励记录',
        iconColor: 'text-yellow'
    },
    {
        title: 'OCR识别',
        path: '/ocr',
        icon: 'Document',
        description: '智能文字识别功能',
        iconColor: 'text-purple'
    }
]

// 学生菜单项
const studentMenus = [
    {
        title: '我的奖励',
        path: '/my-rewards',
        icon: 'Trophy',
        description: '查看我的奖励记录',
        iconColor: 'text-yellow'
    },
    {
        title: '我的处罚',
        path: '/my-punishments',
        icon: 'Warning',
        description: '查看我的处罚记录',
        iconColor: 'text-red'
    },
    {
        title: 'OCR识别',
        path: '/ocr',
        icon: 'Document',
        description: '图片文字识别工具',
        iconColor: 'text-purple'
    }
]
</script>

<style scoped>
.home-container {
    padding: 20px;
}

.page-title {
    text-align: center;
    margin-bottom: 40px;
    color: #303133;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.menu-card {
    cursor: pointer;
    transition: all 0.3s;
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.card-content h2 {
    margin: 15px 0 10px;
    color: #303133;
}

.card-content p {
    color: #606266;
    margin: 0;
}

.text-blue {
    color: #409EFF;
}

.text-green {
    color: #67C23A;
}

.text-orange {
    color: #E6A23C;
}

.text-red {
    color: #F56C6C;
}

.text-yellow {
    color: #F7BA2A;
}

.text-purple {
    color: #909399;
}
</style>